<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图文直播-首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="./assert/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="./assert/css/main.css" />
    <link rel="stylesheet" href="./assert/iconfont/iconfont.css">
    <link rel="shortcut icon" href="./favicon.ico">
    <script src="./assert/js/jquery-3.3.1.min.js"></script>
    <script src="./js/app.js"></script>
    <style>
    .match>h2 {
        font-size: 1.2rem;
        color: #292929;
        height: 2.1rem;
        line-height: 2.1rem;
        padding: 0 .5rem;
        background: #e9e9e9;
    }

    .match-item {
        display: flex;
        padding: 6px;
        border-bottom: 1px solid #eee;
    }
    /* .match-item:last-child {
			border: none;
		} */

    .match-item-info,
    .match-item-teams,
    .match-item-result {
        height: 70px;
        padding: 5px;
    }

    .match-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #888;
        font-size: 1rem;
    }

    .match-item-info .match-time {
        vertical-align: middle;
        color: #404040;
    }

    .match-item-teams {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1.1rem;
        color: #404040;
    }

    .match-item-teams>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        vertical-align: middle;
        padding: 3px;
    }
    /*team的比分*/

    .match-item-teams>div span:last-child {
        color: #888;
    }

    .match-item-teams.isLive>div span:last-child {
        color: red;
    }
    /*视频是否处于直播状态*/

    .match-item .match-item-result {
        font-size: .8rem;
        width: 85px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #888;
    }

    .match-item .match-item-result.isLive {
        color: red;
    }

    .match-item .match-item-result>div:first-child {
        font-size: 1rem;
    }
    </style>
</head>

<body>
    <div>
        <header class="header">
            赛程
            <!--用户处于登录状态时，将该按钮隐藏-->
            <a href="./login.html">
                <!-- <i class="icon iconfont icon-wode my"></i> -->
                <span class="my">登录</span>
            </a>
        </header>
        <div class="content">
            <div class="match">
                <h2>今天 3月13日 星期二</h2>
                <a href="./detail.html">
                    <div class="match-item">
                        <div class="match-item-info">
                            <div class="match-time">
                                08: 00
                                <img src="./imgs/match.png" width="25px" height="25px" />
                            </div>
                            <div>NBA常规赛</div>
                        </div>
                        <div class="match-item-teams isLive">
                            <div>
                                <span>
									<img src="./imgs/team1.png" width="25px" height="25px" />
									马刺
								</span>
                                <span>79</span>
                            </div>
                            <div>
                                <span>
									<img src="./imgs/team2.png" width="25px" height="25px" />
									火箭
								</span>
                                <span>80</span>
                            </div>
                        </div>
                        <div class="match-item-result isLive">
                            <div>图片直播</div>
                            <div>进行中</div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="match">
                <h2>今天 3月14日 星期三</h2>
                <a href="./detail.html">
                    <div class="match-item">
                        <div class="match-item-info normal-font">
                            <div class="match-time">
                                08: 00
                                <img src="./imgs/match.png" width="25px" height="25px" />
                            </div>
                            <div>NBA常规赛</div>
                        </div>
                        <div class="match-item-teams">
                            <div>
                                <span>
									<img src="./imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                                <span>-</span>
                            </div>
                            <div>
                                <span>
									<img src="./imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                                <span>-</span>
                            </div>
                        </div>
                        <div class="match-item-result">
                            <div>图片直播</div>
                        </div>
                    </div>
                </a>
                <a href="./detail.html">
                    <div class="match-item">
                        <div class="match-item-info normal-font">
                            <div class="match-time">
                                08: 00
                                <img src="./imgs/match.png" width="25px" height="25px" />
                            </div>
                            <div>NBA常规赛</div>
                        </div>
                        <div class="match-item-teams">
                            <div>
                                <span>
									<img src="./imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                                <span>-</span>
                            </div>
                            <div>
                                <span>
									<img src="./imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                                <span>-</span>
                            </div>
                        </div>
                        <div class="match-item-result">
                            <div>图片直播</div>
                        </div>
                    </div>
                </a>
                <a href="./detail.html">
                    <div class="match-item">
                        <div class="match-item-info normal-font">
                            <div class="match-time">
                                08: 00
                                <img src="./imgs/match.png" width="25px" height="25px" />
                            </div>
                            <div>NBA常规赛</div>
                        </div>
                        <div class="match-item-teams">
                            <div>
                                <span>
									<img src="./imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                                <span>-</span>
                            </div>
                            <div>
                                <span>
									<img src="./imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                                <span>-</span>
                            </div>
                        </div>
                        <div class="match-item-result">
                            <div>图片直播</div>
                        </div>
                    </div>
                </a>
                <a href="./detail.html">
                    <div class="match-item">
                        <div class="match-item-info normal-font">
                            <div class="match-time">
                                08: 00
                                <img src="./imgs/match.png" width="25px" height="25px" />
                            </div>
                            <div>NBA常规赛</div>
                        </div>
                        <div class="match-item-teams">
                            <div>
                                <span>
									<img src="./imgs/team1.png" width="25px" height="25px" /> 马刺
								</span>
                                <span>-</span>
                            </div>
                            <div>
                                <span>
									<img src="./imgs/team2.png" width="25px" height="25px" /> 火箭
								</span>
                                <span>-</span>
                            </div>
                        </div>
                        <div class="match-item-result">
                            <div>图片直播</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>

</html>